import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ComposeMessageComponent } from './compose-message/compose-message.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { AuthGuard } from './auth/auth.guard';
import { SelectivePreloadingStrategyService } from './selective-preloading-strategy.service';

const appRoutes: Routes = [
  {
    path: 'compose',   // 路由
    component: ComposeMessageComponent,  //路由关联的组件
    outlet: 'popup'
  },
  {
    path: 'admin',
    // loadChildren: './admin/admin.module#AdminModule',
    // import 为惰性加载代码
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    data: { preload: true },
    canLoad: [AuthGuard],
    // canActivate: [AuthGuard],
    // 管理特性区受此守卫保护了（没错，屠龙勇士在此）
  },
  {
    path: 'crisis-center',
    loadChildren: () => import('./crisis-center/crisis-center.module').then(m => m.CrisisCenterModule),
    data: { preload: true }   //路由的预加载
  },
  {
    path: 'test',
    loadChildren: () => import('./test/test.module').then(m => m.TestModule),
    data: { preload: true }
  },
  { path: '', redirectTo: '/superheroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }

  /*
    路由配置的顺序很重要：
      路由器会接受第一个匹配上导航所要求的路径的那个路由。当所有路由都在同一个 AppRoutingModule 时，
      你要把默认路由和通配符路由放在最后， 这样路由器才有机会匹配到你想要的路由，
      否则它就会先遇到并匹配上该通配符路由，并导航到“页面未找到”路由。
  */
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {
      enableTracing: false, // <-- debugging purposes only  你需要查看导航生命周期中发生了什么事件,会把每个导航生命周期中发生的每个路由器事件都输出到浏览器控制台中
      preloadingStrategy: SelectivePreloadingStrategyService,
      useHash: false,  // 是否启用旧版的hash#号路由，一般不带#号看着舒服点
    }
    ),
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }
